import React, { useContext } from "react";
const globalContext = React.createContext();

function Son() {
  const value = useContext(globalContext);
  return (
    //如果是在类中  使用globalContext.consumer包裹住标签 ,使用回调函数,类似vue的provide inject
    // 例如:
    // <globalContext.Consumer>
    //     {(value) => <div>name-{value.name}---age-{value.age}</div>}
    // </globalContext.Consumer>

    <div>
      name-{value.name}---age-{value.age}
    </div>
  );
}

export default function App() {
  return (
    <globalContext.Provider value={{ name: "lyz", age: 24 }}>
      <div>
        <Son></Son>
      </div>
    </globalContext.Provider>
  );
}
